import { FC, useEffect, useState } from 'react';
import { Input, Button, Table, Form, message, Switch, Popconfirm } from 'antd';
import "../../static/css/reviewer/revList.css"
import { reviewer, revdel } from '../../apis/reviewer'
import type { TablePaginationConfig } from 'antd/lib/table';
import type { TableRowSelection } from 'antd/lib/table/interface';
import { useNavigate, useLocation } from 'react-router-dom'


interface IParams {
  page: number,
  pageSize: number
}

const RevList: FC<any> = (props: any): JSX.Element => {
  const navigate = useNavigate();
  const [params, setParams] = useState<IParams>({
    page: 1,
    pageSize: 10
  })

  // 列表
  const [list, setlist] = useState<any>([])

  // 请求接口得到数据
  const listDate = async () => {
    const res: any = await reviewer(params)
    console.log(res);
    if (res.code === '00000') {
      setlist(res.data)
      // 分页
      setPagination({ ...pagination, total: res.total })
    }
  }


  // 开关
  const onChange = (is_use: boolean) => {
    console.log(`switch to ${is_use}`);
  };


  // 复选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection<any> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };



  // 查询
  const onSearch = (e: any) => {
    // console.log(selectedRowKeys);
    setParams({ ...params, page: 1, ...e })
  }



  // 删除
  const del = (id: any) => {
    return () => {
      des(id.id)
    }
  }
  const des = async (id: any) => {
    // console.log(123, id);
    const res: any = await revdel({ id: id })
    console.log(res);
    if (res.code == '00000') {
      listDate()
    } else {
      message.error(res.msg);
    }
  }


  // 批量删除 
  const [idd, setIdd] = useState<any>([])
  const delAll = () => {
    console.log(selectedRowKeys);
    setIdd(selectedRowKeys)
  }
  // 弹框
  const confirm = async (e: any) => {
    console.log(e);
    const res: any = await revdel({ id: idd })
    console.log(res);
    if (res.code == '00000') {
      listDate()
      message.success('删除成功');
    } else {
      message.error(res.msg);
    }
  };


  // 修改
  const edit = (e: any) => {
    return () => {
      console.log(e.id);
      let id = e.id
      navigate(`/index/reviewerAdd/${id}/1`)
    }
  }


  // 添加
  const add = (e: any) => {
    console.log(e);
    let id = e.id
    navigate(`/index/reviewerAdd/tj/2`)
  }

  // 分页
  const pageonChange = (current: number, pageSize: number) => {
    setPagination({ ...pagination, pageSize, current })
    setParams({ ...params, page: current, pageSize })
  }
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 10,
    total: 0,
    // onChange:pageonChange
  });



  useEffect(() => {

    listDate()
  }, [params])



  // 表格
  const columns = [
    {
      title: '核销人姓名',
      dataIndex: 'reviewer_name',
      key: 'reviewer_name',
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
    },
    {
      title: '部门',
      dataIndex: 'deparmentname',
      key: 'deparmentname',
    },
    {
      title: '职务',
      dataIndex: 'job',
      key: 'job',
    },
    {
      title: '是否启用',
      dataIndex: 'is_use',
      key: 'is_use',
      render: () => (<div>
        <Switch size="default" onChange={onChange} />

      </div>)
    },
    {
      title: '操作',
      render: (text: number) => (<div>
        <Button type="primary" onClick={edit(text)} className="btn btn2" size="small">修改</Button>
        <Popconfirm
          title="此操作将永久删除该数据, 是否继续?"
          okText="确认"
          onConfirm={des}
          cancelText="取消"
        >
          <Button type="primary" onClick={del(text)} size="small" danger>删除</Button>
        </Popconfirm>
      </div>)
    },
  ];




  return (
    <div className="body">
      <div className="nav">
        <Form
          name="customized_form_controls"
          layout="inline"
          onFinish={onSearch}
        >
          <Form.Item name="idorname">
            <Input className="inp" placeholder='请输入核检人姓名' />
          </Form.Item>

          <Form.Item>
            <Button className="btn" type="primary" size="middle" htmlType="submit">查询</Button>
            <Button className="btn" type="primary" size="middle" onClick={add}>添加</Button>
            <Popconfirm
              title="此操作将永久删除该数据, 是否继续?"
              onConfirm={confirm}
              // onCancel={cancel}
              okText="确认"
              cancelText="取消"
            >
              <Button className="btn" type="primary" size="middle" onClick={delAll}>批量删除</Button>
            </Popconfirm>


          </Form.Item>
        </Form>
      </div>
      <div className="tab">
        <Table
          className="table"
          rowSelection={rowSelection}
          rowKey='id'
          dataSource={list}
          columns={columns}
          pagination={{ ...pagination, onChange: pageonChange }}
        />
      </div>
    </div>
  )
}
export default RevList;